<!-- 商品列表，单品，一行一列 -->
<template>
  <div class="goods_listYone">
    <div class="Btit border-bottom">{{goodsYoneData.title_string}}</div>
    <ul class="goodslist">
      <li v-for="(item,index) of goodsYoneData.data" :key="index">
        <img class="img" v-lazy="item.img_url" alt="">
        <div class="goodslist_r">
          <h1>{{item.country_name}}.{{item.title}}</h1>
          <h2>{{item.product_name}}</h2>
          <h3 class="price">
            <em>￥{{item.sale_price}}</em>
            <cite>￥{{item.price}}</cite>
            <i>立即抢购</i>
          </h3>
        </div>
      </li>
    </ul>
    <div class="h10"></div>
  </div>
</template>

<script>
export default {
    name: 'GoodsListYone',
    props:{
      goodsYoneData:Object
    },
    methods:{
      goods_link(e){
        window.location.href = e
      }
    }
}

</script>

<style lang="stylus" scoped>
.goods_listYone{width:100%;overflow:hidden;margin-top:10px;}
.Btit{width:100%;overflow:hidden;color:#df4b53;font-size:16px;text-align:center;height:50px;line-height:50px;background:#fff;}
.goodslist{width:100%;overflow:hidden;}
.goodslist li{width:100%;overflow:hidden;display: flex;flex-direction: row;align-items: center;background:#fff;margin-bottom:10px;padding:0 15px 0 10px;box-sizing:border-box;padding-bottom:10px;}
.goodslist li .img{width:110px;height:110px;}
.goodslist_r{flex: 1;overflow: hidden;padding-left:0.2rem;}
.goodslist_r h1{width:100%;font-size:14px;color:#363636;white-space:normal;font-weight: 500;margin-top:0.533333rem;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;}
.goodslist_r h2{color:#898989;font-size:12px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;height:0.9rem;line-height: 0.48rem;margin-top:0.05rem;}
.goodslist_r h3{height:30px;line-height:30px;}
//.goodslist_r h3{display:flex;flex-direction:row;align-items:center;justify-content: space-between;}
.goodslist_r h3.price{width:100%;overflow: hidden;}
.goodslist_r h3.price em{display: inline-block;font-style: normal;color:#df4b53;font-size:16px;float: left;font-weight: 500;}
.goodslist_r h3.price em:first-letter{display: inline-block;}
.goodslist_r h3.price cite{display: inline-block;font-style: normal;color:#ccc;text-decoration: line-through;font-size:14px;margin-left:10px;float: left;color:#aaa;margin-top:2px;}
.goodslist_r h3.price cite:first-letter{}
.goodslist_r h3.price i{display: inline-block;font-style: normal;font-size:0.293333rem;color:#fff;width:90px;height:30px;line-height:30px;text-align: center;border-radius:0.053333rem;background:#df4b53;float:right;}
</style>

